﻿<phone:PhoneApplicationPage
    x:Class="Conqueror.WP.LoginPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerikCore="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Core"
    xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
    xmlns:viewModel="clr-namespace:Conqueror.WP.ViewModel.Login"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    telerikCore:InteractionEffectManager.IsInteractionEnabled="True">
	<phone:PhoneApplicationPage.Resources>
		<Storyboard x:Name="animDisplayLoginOverlay">
			<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="txtLoginMessage">
				<EasingColorKeyFrame KeyTime="0" Value="Transparent"/>
				<EasingColorKeyFrame KeyTime="0:0:0.25" Value="Transparent"/>
				<EasingColorKeyFrame KeyTime="0:0:0.5" Value="White"/>
			</ColorAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="bdrLoginOverlay">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
		<Storyboard x:Name="animHideLoginOverlay">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="bdrLoginOverlay">
				<EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="txtLoginMessage">
                <EasingColorKeyFrame KeyTime="0" Value="White"/>
                <EasingColorKeyFrame KeyTime="0:0:0.25" Value="Transparent"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="animDisplayLoginFail">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="loginFailMessage">
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="animHideLoginFail">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="loginFailMessage">
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <Border Background="{StaticResource PhoneForegroundBrush}"
                VerticalAlignment="Stretch" Margin="96">
            <Border.OpacityMask>
                <ImageBrush ImageSource="Image/IconLarge.png" Stretch="Uniform"/>
            </Border.OpacityMask>
        </Border>
        
        <StackPanel VerticalAlignment="Center" Grid.RowSpan="2">
            <TextBlock Text="CONQUEROR"
                       HorizontalAlignment="Center"
                       FontSize="{StaticResource PhoneFontSizeExtraLarge}"
                       Margin="0,0,0,-6"/>
            <TextBlock Text="BY SAMUEL WRONSKI"
                       HorizontalAlignment="Center"
                       FontSize="{StaticResource PhoneFontSizeSmall}"
                       Margin="0,0,0,-18"
                       Foreground="{StaticResource PhoneSubtleBrush}"/>
            <Grid Height="84" Margin="0,0,12,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="52"/>
                </Grid.ColumnDefinitions>
                <telerikPrimitives:RadTextBox Watermark="username" VerticalAlignment="Stretch"
                                              Text="{Binding Username, Mode=TwoWay}"
                                              IsHitTestVisible="{Binding Enabled}"
                                              TextChanged="HideMessageDisplay"/>
                <Button Grid.Column="1" Background="{StaticResource PhoneAccentBrush}"
                        Margin="-12,8,-12,0" Click="btnBeginLogin" BorderThickness="0"
                        IsHitTestVisible="{Binding Enabled}">
                    <Border Background="White" Margin="-24">
                        <Border.OpacityMask>
                            <ImageBrush ImageSource="/Image/Icons/appbar.check.png"/>
                        </Border.OpacityMask>
                    </Border>
                </Button>
                
                <Grid x:Name="bdrLoginOverlay" Margin="12,20,0,12" Background="{StaticResource PhoneAccentBrush}"
                        RenderTransformOrigin="1,0.5" Grid.ColumnSpan="2">
                	<Grid.RenderTransform>
                		<CompositeTransform ScaleX="0"/>
                	</Grid.RenderTransform>
                    <TextBlock x:Name="txtLoginMessage" Text="{Binding LoginMessage}" VerticalAlignment="Center"
                               Foreground="White" Margin="12" RenderTransformOrigin="0.5,0.5"
                               HorizontalAlignment="Center" FontSize="{StaticResource PhoneFontSizeMedium}"/>

                    <ProgressBar Foreground="White" IsIndeterminate="True"
                                 VerticalAlignment="Bottom" Margin="-12,0"/>
                </Grid>
            </Grid>
        </StackPanel>

        <StackPanel x:Name="loginFailMessage" Grid.Row="1"
                    Opacity="0" Margin="0,60,0,0">
                    <TextBlock Text="FAILED TO LOG YOU IN" Foreground="{StaticResource PhoneForegroundBrush}"
                        HorizontalAlignment="Center" FontSize="{StaticResource PhoneFontSizeMedium}"/>
            <TextBlock Text="{Binding FailureMessage}" Foreground="{StaticResource PhoneSubtleBrush}"
                        HorizontalAlignment="Center" FontSize="{StaticResource PhoneFontSizeSmall}"/>
        </StackPanel>
        
        <StackPanel Orientation="Horizontal"
                    VerticalAlignment="Bottom"
                    Margin="0,0" Grid.Row="2"
                    HorizontalAlignment="Center"
                    Tap="RegisterNewAccount">
            <Border Height="48" Width="48"
                    Background="{StaticResource PhoneAccentBrush}">
                <Border.OpacityMask>
                    <ImageBrush ImageSource="/Image/Icons/appbar.people.profile.png"/>
                </Border.OpacityMask>
            </Border>

            <TextBlock Text="Get an Account"
                        Foreground="{StaticResource PhoneAccentBrush}"
                        FontSize="{StaticResource PhoneFontSizeMedium}"
                        VerticalAlignment="Center"/>
        </StackPanel>
    </Grid>
</phone:PhoneApplicationPage>